<template>
  <div class="total-view content-container">
    <div class="content">
      <date-tip label="安全运行天数" :value="info.rundays" />
      <label-value-row label="本月工单" :value="info.rworknums || 0" />
      <div class="echarts">
        <div id="echarts-2-1"></div>
      </div>
      <div class="data-div">
        <div class="row">
          <div class="left">
            <circle-item color="#308AE7" />
            <span>完成数量 {{ info.rworkfinish || 0 }}</span>
          </div>
          <div>占比 {{ info.rperfinish || '0%' }}</div>
        </div>
        <div class="row">
          <div class="left">
            <circle-item color="#FF66B7" />
            <span>电力服务 {{ info.rworkrepair || 0 }}</span>
          </div>
          <div>占比 {{ info.rperrepair || '0%' }}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>
        <div class="row">
          <div class="left">
            <i class="el-icon-s-tools small-icon"></i>
            <span>月运行情况</span>
          </div>
          <el-rate
            :value="info.runstatus || 0"
            disabled
            :colors="['#308AE7', '#308AE7', '#308AE7']"
            disabled-void-color="#E2E7EE"
          ></el-rate>
        </div>
        <div class="row">
          <div class="left">
            <i class="el-icon-s-order small-icon"></i>
            <span>月报情况</span>
          </div>
          <el-button size="mini">下载</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DateTip from "./DateTip";
import LabelValueRow from "./LabelValueRow";
import CircleItem from "./CircleItem";
import echarts from "echarts";
export default {
  components: {
    DateTip,
    LabelValueRow,
    CircleItem
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      echarts1: null
    };
  },
  computed: {
    noDone() {
      return (
        this.info.rworknums - this.info.rworkfinish - this.info.rworkrepair || 0
      );
    }
  },
  mounted() {
    this.echarts1 = echarts.init(document.getElementById("echarts-2-1"));
    this.setOption1();
  },
  methods: {
    setOption1() {
      const noDone = this.noDone;
      let data = [
        {
          value: this.info.rworkfinish || 0,
          name: "完成数量",
          itemStyle: { color: "#308AE7" }
        },
        {
          value: this.info.rworkrepair || 0,
          name: "电力服务",
          itemStyle: { color: "#FF66B7" }
        },
        {
          value: noDone,
          name: "未完成",
          itemStyle: { color: "#D6E8FA" }
        }
      ];
      if (!this.info.rworkrepair) {
        data = [
          {
            value: noDone,
            name: "未完成",
            itemStyle: { color: "#D6E8FA" }
          }
        ];
      }
      const option = {
        tooltip: {
          show: false,
          trigger: "none",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "工单",
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data
          }
        ]
      };
      this.echarts1.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.total-view {
  display: flex;
  flex-direction: column;
  .echarts {
    margin-bottom: 10px;
    height: auto;
    #echarts-2-1 {
      width: 80px;
      height: 80px;
      margin: 0 auto;
    }
  }
  .data-div {
    font-size: 14px;
  }
}
</style>
